<template>
    <div >
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/product/list' }">商品列表</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.type=='edit'?'商品修改':'商品新增'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form v-loading="loading" :model="spuSaveDto" :rules="rules" ref="spuSaveDto" label-width="100px" class="demo-ruleForm">
            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="spuSaveDto.name" style="width: 400px;" placeholder="请输入商品名称，建议20字以内"></el-input>
            </el-form-item>
            <el-form-item label="品牌选择" prop="brandId">
                <el-select v-model="spuSaveDto.brandId" placeholder="请选择品牌">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <!-- <a style="padding-left: 20px;color: #3576BE;font-size: initial;font-weight: 600;"> <i class="el-icon-refresh"></i>添加品牌</a> -->
            </el-form-item>
            <!-- spuSaveDto.categoryId -->
            <el-form-item label="商品分类" prop="categoryId">
                <!-- <el-select v-model="mineStatus" multiple collapse-tags placeholder="请选择商品分类"  @change="selectChange">
                <el-option   :value="mineStatusValue" style="height: auto"> -->
                    <el-select v-model="treeData" placeholder="请选择...">
                    <el-option :value="treeDataValue" style="height: auto">
                   <el-tree
                        ref="tree"
                        :data="categoryList"
                        default-expand-all
                        node-key="id"
                        :props="defaultProps"
                        @node-click="handleNodeClick"
                        />
                    <!-- <el-tree :data="categoryList" node-key="id" ref="tree" highlight-current :props="defaultProps"  @node-click="handleCheckChange"></el-tree> -->
                </el-option>
                
                <!-- <el-option label="1" value="shanghai"></el-option>
                <el-option label="2" value="beijing"></el-option> -->
                </el-select>
                <!-- <a style="padding-left: 20px;color: #3576BE;font-size: initial;font-weight: 600;"> <i class="el-icon-refresh"></i>设置类别</a> -->
            </el-form-item>
            <el-form-item label="单位" prop="unitId">
                <el-select v-model="spuSaveDto.unitId" placeholder="请选择单位" style="width:300px">
                <el-option v-for="item in unitList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-divider content-position="left">规格属性</el-divider>
            <el-form-item label="选择规格" prop="checkAttr">
                <el-select v-model="spuSaveDto.checkAttr" multiple collapse-tags placeholder="请选择规格" style="width:300px" @change="selectAttr">
                    <el-option v-for="item in checkAttrList" :key="item.attrId" :label="item.attrName" :value="item.attrId"></el-option>
                </el-select>
            </el-form-item>
            <el-row>
            <el-col :span="12" v-for="(item,index) in attrChildList"  :key="index">
                <el-form-item :label="item.attrName" >
                    <el-select v-model="arrChindName[item.label]" multiple collapse-tags style="width:300px" @change="selectAttrChild(arrChindName[item.label],item)">
                        <el-option v-for="arr in item.attributeValues" :key="arr" :label="arr" :value="arr"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            </el-row>
            <!-- <el-col :span="12">
                <el-form-item label="内存" prop="neicun">
                    <el-select v-model="spuSaveDto.neicun" placeholder="请选择内存" style="width:300px">
                    <el-option label="1" value="shanghai"></el-option>
                    <el-option label="2" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
            </el-col> -->
             <el-form-item label="sku信息" prop="region" v-if="spuSaveDto.checkAttr.length!=0">
                <el-table :data="orgTableData"  border >
                        <!-- :min-width="item.minWidth" :width="item.width" -->
                    <el-table-column
                        v-for="item in tableColumns"
                        :key="item.key"
                        :label="item.name"
                        :prop="item.prop"
                        show-overflow-tooltip
                        align="center"
                    >
                    </el-table-column>
                    <el-table-column
                        label="售价"
                        prop="orgTableData.price">
                        <template slot-scope="scope">
                            <!-- <el-input v-model="scope.row['name']"></el-input> -->
                            <el-input v-model="scope.row.price"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orgTableData.cost"
                        label="成本">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.cost"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orgTableData.weight"
                        label="重量(g)">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.weight"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="orgTableData.stock"
                        label="库存">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.stock"></el-input>
                        </template>
                    </el-table-column>
                    </el-table>
            </el-form-item>
            <el-form-item label="销量" prop="sellNum">
                <el-input v-model="spuSaveDto.sellNum" style="width: 200px;"></el-input>件
            </el-form-item>
            <el-form-item label="服务说明" prop="serviceDescription">
                <el-input type="textarea"   v-model="spuSaveDto.serviceDescription"></el-input>
            </el-form-item>
            <el-form-item label="是否包邮" prop="notPostage">
                <el-radio-group v-model="spuSaveDto.notPostage">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
                </el-radio-group>
                <span v-if="spuSaveDto.notPostage" style="color: #47ACF5;font-weight: 600;padding-left: 20px">选择包邮，快递费为0</span>
                <div v-if="!spuSaveDto.notPostage"  style="color: red;font-weight: 600;padding-left: 20px;display: inline;"> 快递费为<input v-model="spuSaveDto.freightPrice" style="width: 50px;">元</div>
            </el-form-item>
            <el-form-item label="减库存方式" prop="subStoreType">
                <el-radio-group v-model="spuSaveDto.subStoreType">
                <el-radio :label="0">线上品牌商赞助</el-radio>
                <el-radio :label="1">线下场地免费</el-radio>
                </el-radio-group>
                <p style="line-height: 10px;color: #47ACF5;font-weight: 600;">请仔细阅读以下提示：</p>
                <p style="line-height: 10px;color: #47ACF5;font-weight: 600;">1,拍下立减库存方式，用户下单无需真是付款即减少库存，注意：可能会存在<span style="color: red;font-weight: 600;">库存被挤占</span>的情况，被挤占库存将会30分钟之后自动释放</p>
                <p style="line-height: 10px;color: #47ACF5;font-weight: 600;">2,付款减库存方式，用户下单并且真实付款成功之后，才会减少库存，注意：会存在<span style="color: red;font-weight: 600;">超库存风险，慎用，否则可能带来经济损失，本平台概不负责</span></p>
                <p style="line-height: 10px;color: #47ACF5;font-weight: 600;">3,永不减少库存，用户下单付款也不会去减少库存</p>
            </el-form-item>
            <el-divider content-position="left">商品图文</el-divider>
            <el-form-item label="商品描述" prop="productDesc">
                <el-input type="textarea"   v-model="spuSaveDto.productDesc"></el-input>
            </el-form-item>
            <el-form-item label="商品主图">
                <el-upload
                    action=""
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :http-request="ossUpload"
                    :file-list="mainImgList">
                <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                <p style="line-height: 5px;color: #47ACF5;font-weight: 600;font-size: initial;">1、商品主图将会展示在商品详情页轮播图里</p>
            </el-form-item>
            <el-form-item label="商品详情">
                 <el-upload
                    action=""
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview2"
                    :on-remove="handleRemove2"
                    :http-request="ossUpload2"
                    :file-list="infoImgList">
                <i class="el-icon-plus" />
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                <img width="100%" :src="dialogImageUrl2" alt="">
                </el-dialog>
                <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit="10"  :class="{hide:hideUpload2}" :on-change="handleEditChange2">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                        <span class="el-upload-list__item-actions">
                            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview2(file)">
                            <i class="el-icon-zoom-in"></i>
                            </span>
                            <span v-if="!disabled2" class="el-upload-list__item-delete" @click="handleDownload2(file)" >
                                <i class="el-icon-download"></i>
                            </span>
                            <span v-if="!disabled2" class="el-upload-list__item-delete" @click="handleRemove2(file)">
                                <i class="el-icon-delete"></i>
                            </span>
                    </span>
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                    <img width="100%" :src="dialogImageUrl2" alt="">
                </el-dialog> -->
                <p style="line-height: 5px;color: #47ACF5;font-weight: 600;font-size: initial;">1、商品详情图将会展示在商品的详情列表里</p>
            </el-form-item>
            <el-form-item label="是否上下架" prop="shelves">
                <el-radio-group v-model="spuSaveDto.shelves">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="发布平台" prop="channel">
                <el-radio-group v-model="spuSaveDto.channel">
                    <el-radio :label="1">权益商城</el-radio>
                    <el-radio :label="2">采购商城</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item style="text-align:center">
                <el-button @click="comeBack()">返回</el-button>
                <el-button type="primary" :disabled ="isClick" @click="submitForm('spuSaveDto')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { sysAjax,spuAjax } from 'Ajax'
const axios = require('axios')
export default {
      data() {
      return {
        treeData: "",
        treeDataValue: "",
        skuSaveDtoList:[],
        arrChildList:[],
        mainPictureList:[],
        infoPictureList:[],
        tableColumns: [],
        orgTableData:[],
        arrChindName:{},
        loading:false,
        defaultProps: {
        children: "children",
        label: "name"
        },
        mineStatus: "",
        mineStatusValue: "",
        brandList:[], //品牌数组
        categoryList:[], //商品分类数组
        unitList:[], //单位数组
        checkAttrList:[],
        attrChildList:[],
        spuSaveDto:{
            name:'', //商品名称
            brandId:'', //品牌id
            categoryId:'',
            categoryIds:'', //商品分类
            unitId:'', //单位id
            checkAttr:[], //选中规格list
            sellNum:'', //销量
            serviceDescription:'', //服务说明
            notPostage:true, //是否包邮:false:不包邮,true:包邮
            subStoreType:0, //减库存方式
            productDesc:'', //商品描述
            // synMerchant:'', //是否同步商家
            channel:1, //发布平台
            freightPrice:'',//邮费
            shelves:true //是否上下架
        },
        rules: {
            name: [
            { required: true, message: '请输入商品名称', trigger: 'blur' }
            ],
            // categoryId: [
            // { required: true, message: '请选择商品分类', trigger: 'change' }
            // ],
            checkAttr: [
            { required: true, message: '请选择规格', trigger: 'change' }
            ],
            sellNum: [
            { required: true, message: '请输入销量', trigger: 'blur' }
            ],
        },
        attrChildDetail:[],
        tableData:[],
        mainImgList:[],
        infoImgList:[],
        resource:'',
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        dialogVisible1: false,
        disabled1: false,
        hideUpload: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        disabled2: false,
        hideUpload2: false,
        isClick:false
      }
    },
    props: [ "type","spuId"],
    created(){
        if(this.type == 'edit'){
            this.loading = true
        }
        this.getUnitList();
        this.getCategoryList();
        this.getbrandList();
        this.getcheckAttrList();
    },
    methods: {
         //新增
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.isClick = true
                    this.orgTableData.forEach(element => {
                        if(element.price == ''|| element.cost == ''
                            || element.weight == ''|| element.stock == ''){
                            this.$message.error('请填写sku的售价、成本、重量、库存等参数!')
                            return;
                        }else{
                            element.attributeDesc = []
                            this.attrChildList.forEach(i => {
                                element.attributeDesc.push(element[i.label])
                                delete element[i.label]
                            });
                            element.attributeDesc = element.attributeDesc.toString()
                        }
                    });
                    this.attrChildList.forEach(i => {
                        delete i.label
                    });
                    this.spuSaveDto.checkAttr = JSON.stringify(this.attrChildList)
                    this.skuSaveDtoList = this.orgTableData
                    this.infoPictureList.forEach(i => {
                        delete i.uid
                    });
                    this.mainPictureList.forEach(i => {
                        delete i.uid
                    });
                    this.spuSaveDto.sellNum = Number(this.spuSaveDto.sellNum)
                    var params = {
                            infoPictureList:this.infoPictureList,
                            mainPictureList:this.mainPictureList,
                            skuSaveDtoList:this.skuSaveDtoList,
                            spuSaveDto:this.spuSaveDto
                    }
                    // return
                    if(this.spuId){
                        params.spuSaveDto.id = Number(this.spuId);
                            var param = {
                                infoPictureList:params.infoPictureList,
                                mainPictureList:params.mainPictureList,
                                skuUpdateDtoList:params.skuSaveDtoList,
                                spuUpdateDto:params.spuSaveDto
                            }
                            
                        spuAjax.updateSpu(param).then(res => {
                            if(res.ok){
                                this.$message({ type: 'success', message: '修改商品成功' })
                            } else{
                                this.$message({ type: 'error', message: '修改商品失败' })
                            }
                             this.$emit('ListenerChild', 'commit')
                            // this.$router.push({path:'/product/list',query: {type: 'edit'}});
                        })
                    }else {
                        spuAjax.saveSpu(params).then(res => {
                            if(res.ok){
                                this.$message({ type: 'success', message: '添加商品成功' })
                            } else{
                                this.$message({ type: 'error', message: '添加商品失败' })
                            }
                            this.$emit('ListenerChild', 'commit')
                            // this.$router.push({path:'/product/list',query: {type: 'edit'}});
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        // 返回
        comeBack(){
            this.$emit('ListenerChild', 'back')
            // this.$router.push({path:'/product/list'});
        },
        //详情
        getDetail(){
            this.loading = true
            spuAjax.getSpuDetailBySpuId({spuId:this.spuId}).then(res => {
                this.loading = false
                this.skuSaveDtoList = res.skuUpdateDtoList;
                this.spuSaveDto = res.spuUpdateDto;
                // for (const key in this.spuSaveDto) {
                //     this.spuSaveDto[key] = res.spuSaveDto[key]
                // }
                this.spuSaveDto.checkAttr = JSON.parse(this.spuSaveDto.checkAttr);
                let attrList = []
                this.spuSaveDto.checkAttr.forEach(el => {
                    attrList.push(el.attrId)
                    el.label = 'attrName'+el.attrId
                    this.attrChildList.push(el)
                    this.tableColumns.push({key:el.attrId,name:el.attrName,prop:el.label})
                    this.arrChindName[el.label] = el.checkAttributeValues
                });
                this.attrChildDetail=this.attrChildList
                this.spuSaveDto.checkAttr = attrList
                this.orgTableData = this.skuSaveDtoList
                this.orgTableData.forEach(i => {
                   let colums =  i.attributeDesc.split(',')
                   for (let index = 0; index < this.tableColumns.length; index++) {
                       i[this.tableColumns[index].prop] = colums[index]
                   }
                });
                // this.skuTable = JSON.parse(JSON.stringify( this.orgTableData ));
                // console.log(this.findPathByLeafId(this.spuSaveDto.categoryId,this.categoryList),'-----')
                this.treeDataValue= this.findPathByLeafId(this.spuSaveDto.categoryId,this.categoryList);
    　　　　     this.treeData= this.treeDataValue.name
                // console.log(this.infoPictureList)
                res.infoPictureList.forEach(i => {
                    this.infoPictureList.push({ "pictureType": 'info',"pictureUrl": i.pictureUrl,"deleted": false})
                    this.infoImgList.push({url: i.pictureUrl})
                });
                res.mainPictureList.forEach(i => {
                    this.mainPictureList.push({ "pictureType": 'main',"pictureUrl": i.pictureUrl,"deleted": false})
                    this.mainImgList.push({url: i.pictureUrl})
                });
                let treeDate = this.spuSaveDto.categoryIds.split(',');
                let that = this;
                setTimeout(function() {
                    treeDate.forEach(value => {
                    that.$refs.tree.setChecked(value, true, false);
                    });
                    }, 500);
            })
        },
        findPathByLeafId(leafId, nodes, path) {
            if(path === undefined) {
                path = {};
            }
        for(var i = 0; i < nodes.length; i++) {
            var tmpPath = path;
            //   tmpPath.push(nodes[i].id);
            if(leafId == nodes[i].id) {
                tmpPath=nodes[i];
                return tmpPath;
            }
            if(nodes[i].children) {
                var findResult = this.findPathByLeafId(leafId, nodes[i].children,  tmpPath);
                if(findResult) {
                return findResult;
                }
            }
        }
    },
        //商品单位
        getUnitList(){
            spuAjax.selectList().then(res => {
                this.unitList = res
            })
        },
        //商品分类
        getCategoryList(){
            spuAjax.getCategoryTree().then(res => {
                this.categoryList = res
                if(this.type == 'edit'){
                    this.getDetail();
                }
            })  
        },
        //商品品牌
        getbrandList(){
            spuAjax.getPushBrandVoList().then(res => {
                this.brandList = res
            })
        },
        //商品规格
        getcheckAttrList(){
            spuAjax.getPushAttributeVoList().then(res => {
                this.checkAttrList = res.attributeVOList
            })
        },
        selectAttr(item){
            this.attrChildList = [];
            this.tableColumns = [];
            this.orgTableData = [];
            // if(item.length==0){this.orgTableData = [];}
            item.forEach(i => {
                this.checkAttrList.forEach(j => {
                    if(i== j.attrId){
                        // let item = this.attrChildDetail.filter(item => item.attrId  == j.attrId)
                        // if(item.length!=0){
                        //     j.checkAttributeValues = item[0].checkAttributeValues
                        // }
                        j.label = 'attrName'+j.attrId
                        this.attrChildList.push(j)
                        this.tableColumns.push({key:j.attrId,name:j.attrName,prop:j.label})
                    }
                });
            });
            this.attrChildList.forEach(element => {
                for (const key in this.arrChindName) {
                    if (key ==element.label) {
                            this.arrChindName[key] = [];
                        }
                }
                });
        },
        selectAttrChild(item,arr){
            let isSelect = true
            let keyList = [];
            let brr = [];
            let brrResult = [];
            this.orgTableData = [];
            this.attrChildList.forEach(element => {
                if(element.attrId==arr.attrId){
                    element.checkAttributeValues = item
                }
                if(element.checkAttributeValues==null||element.checkAttributeValues.length==0){
                    isSelect = false
                }else{
                    brr.push(element.checkAttributeValues)
                    keyList.push(element.label)
                }
            });
            if(item.length!=0&&isSelect){
                var obj = {};
                var cloneObj = {}
                brrResult = this.getCombination(brr)
                if(this.attrChildList.length==1){
                    item.forEach(el => {
                        obj[arr.label] = el
                        cloneObj = JSON.parse(JSON.stringify( obj ));
                        cloneObj.price = '';
                        cloneObj.cost = '';
                        cloneObj.weight = '';
                        cloneObj.stock = '';
                        this.orgTableData.push(cloneObj)
                    });
                }else{
                    for (var i = 0; i < brrResult.length; i++) {
                        for (var j = 0; j < brrResult[i].length; j++) {
                            obj[keyList[j]] = brrResult[i][j]
                        }
                        cloneObj = JSON.parse(JSON.stringify( obj ));
                        cloneObj.price = '';
                        cloneObj.cost = '';
                        cloneObj.weight = '';
                        cloneObj.stock = '';
                        this.orgTableData.push(cloneObj)
                    } 
                }
                // this.transformObject()indexOf
            }
            // this.orgTableData.forEach(element => {
            //     element.attributeDesc = []
            //     this.attrChildList.forEach(i => {
            //     console.log(element[i.label])
            //     element.attributeDesc.push(element[i.label])
            //         });
            //     element.attributeDesc = element.attributeDesc.toString()
            // });
            // console.log(this.orgTableData,'--------')
            // this.skuTable
        },
        getCombination(array){
            let resultArry=[];
			array.forEach((arrItem)=>{
				if(resultArry.length===0){
					resultArry=arrItem
				}else{
					const emptyArray=[];
					resultArry.forEach((item)=>{
						arrItem.forEach((value)=>{
                            if(Array.isArray(item)){
							    emptyArray.push([...item,value])
                            }else{
							    emptyArray.push([item,value])
                            }
						})	
					})
					resultArry=emptyArray
		       }
		   });
		       return resultArry;
			},
        selectChange(e){
            var arrNew = [];
            var dataLength = this.mineStatusValue.length;
            var eleng = e.length;
            for(let i = 0; i< dataLength ;i++){
                for(let j = 0; j < eleng; j++){
                if(e[j] === this.mineStatusValue[i].label){
                    arrNew.push(this.mineStatusValue[i])
                }
                }
            }
            this.$refs.tree.setCheckedNodes(arrNew);//设置勾选的值
        },
        handleNodeClick(data,node,nodeData){
    　　　　this.treeDataValue= data
    　　　　this.treeData= data.name
            this.spuSaveDto.categoryId = data.id
            var vArr = []  
            var a = this.categoryList
            var vArrdata = shellArr(this.categoryList, data.id)
            vArrdata.push(data.id)
            this.spuSaveDto.categoryIds = vArrdata.join(',')
            function shellArr(obj,id){  
            if(obj.length){
                obj.forEach(item => {
                if (item.children && item.children.length) {
                    if (item.children.some(row => row.id === id)) {
                    vArr.unshift(item.id)
                    shellArr(a,item.id)
                    }else{
                    shellArr(item.children, id)
                    }
                }else{return}
                })
            }
            return vArr
            }
        },
        ossUpload(data) {
            const file = data.file

            const index = file.name.indexOf('.')
            const nameEnd = file.name.substr(index)

            sysAjax.ossPolicy().then(res => {

                const nameStart = new Date().getTime() + '' + Math.ceil(Math.random() * 100)
                const name = '/' + nameStart + nameEnd

                const sendData = new FormData()
                sendData.append('OSSAccessKeyId', res.accessKeyId)
                sendData.append('policy', res.policy)
                sendData.append('signature', res.signature)
                // sendData.append('keys', res.dir)
                sendData.append('key', res.dir + name)
                sendData.append('success_action_status', '200') // 指定返回的状态码
                sendData.append('callback', res.callback)
                sendData.append('type', 'image/jpeg')
                sendData.append('file', file)
                axios.post(res.host, sendData, {
                'Content-Type': 'multipart/form-data'
                }).then(ossRes => {
                    var item = {
                        "pictureType": 'main',
                        "pictureUrl": ossRes.data.data.filename,
                        "deleted": false,
                    }
                    this.mainPictureList.push(item);
                })
        })
        },
        ossUpload2(data) {
            const file = data.file

            const index = file.name.indexOf('.')
            const nameEnd = file.name.substr(index)

            sysAjax.ossPolicy().then(res => {

                const nameStart = new Date().getTime() + '' + Math.ceil(Math.random() * 100)
                const name = '/' + nameStart + nameEnd

                const sendData = new FormData()
                sendData.append('OSSAccessKeyId', res.accessKeyId)
                sendData.append('policy', res.policy)
                sendData.append('signature', res.signature)
                // sendData.append('keys', res.dir)
                sendData.append('key', res.dir + name)
                sendData.append('success_action_status', '200') // 指定返回的状态码
                sendData.append('callback', res.callback)
                sendData.append('type', 'image/jpeg')
                sendData.append('file', file)
                axios.post(res.host, sendData, {
                'Content-Type': 'multipart/form-data'
                }).then(ossRes => {
                    var item = {
                        "pictureType": 'info',
                        "pictureUrl": ossRes.data.data.filename,
                        "deleted": false,
                    }
                    this.infoPictureList.push(item);
                })
        })
        },
         // 移除
        handleEditChange (file, fileList) {
            this.hideUpload = fileList.length >= 5
        },
        handleRemove(file, fileList) {
            this.mainPictureList = this.mainPictureList.filter(item => item.id != file.uid)
            this.hideUpload = fileList.length >= 5
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleEditChange2 (file, fileList) {
            this.hideUpload2 = fileList.length >= 10
        },
        handleRemove2(file, fileList) {
            this.infoPictureList = this.infoPictureList.filter(item => item.id != file.uid);
            this.hideUpload2 = fileList.length >= 10
        },
        handlePictureCardPreview2(file) {
            this.dialogImageUrl2 = file.url;
            this.dialogVisible2 = true;
        },
        distinct(arr,key){
            let len = arr.length;
            for(let i = 0; i < len; i++){
            for(let j = i + 1; j < len; j++){
            if(arr[i][key] == arr[j][key]){
                arr.splice(j,1);
                len--;
                j--;
            }
            }
            }
            return arr;
            }
        
    }
}
</script>
<style scope>
	.hide .el-upload--picture-card {
  		display: none;
	}
    .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 40px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 40px;
}
</style>